<template>
  <div id="app" class="dark-theme">
    <el-container id="container">
      <el-header id="header" class="d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center">
          <el-button :plain="true" :bg="false" @click="visibleOfAside = !visibleOfAside" title="点击按钮展开或收起侧边栏">
            <i class="el-icon-s-fold"></i>
          </el-button>
          <h3 class="text-white">立志愿管理系统</h3>
        </div>
        <div class="d-flex align-items-center">
          <el-button @click="visibleOfMessagebox = !visibleOfMessagebox" class="me-2">
            <i class="el-icon-bell fs-5"></i>
          </el-button>
          <el-dropdown @command="onChangeUserProfileMenu">
            <div class="d-flex align-items-center text-white">
              <el-image style="width: 25px; height: 25px" :src="dataOfUser.avatar"
                :preview-src-list="[dataOfUser.avatar]" class="rounded-circle border border-1 border-secondary">
              </el-image>
              <span class="ms-2">{{ dataOfUser.nick_name }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="update-pwd">修改密码</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <transition name="el-zoom-in-center">
          <el-aside id="aside" v-show="visibleOfAside" width="210px">
            <el-menu :default-openeds="['m0', 'm0-0']">
              <el-submenu :index="'m' + idx" v-for="(item, idx) of dataOfMenu" :key="idx">
                <template slot="title">{{ item.title }}</template>
                <el-menu-item :index="'m' + idx + '-' + idx2" v-for="(item2, idx2) of item.children" :key="idx2"
                  @click="onClickMenuItem(item2)">
                  {{ item2.title }}
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
        </transition>
        <el-main id="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 容器 -->
    <messages-panel :visible.sync="visibleOfMessagebox"></messages-panel>
  </div>
</template>

<script>
// https://cn.vuejs.org/v2/guide/
// https://adminlte.io/themes/v3/
// https://eleadmin.com/
// https://www.antdv.com/components/overview-cn/
// https://element.eleme.cn/#/zh-CN/component/installation

// https://element-plus.gitee.io/zh-CN/guide/dark-mode.html

import MessagesPanel from './components/Messagesbox/MessagesPanel.vue'
export default {
  components: { MessagesPanel },
  name: "App",
  data() {
    return {
      visibleOfAside: true,
      visibleOfMessagebox: false,
      // 用户数据
      dataOfUser: {
        id: 1,
        user_name: "admin",
        nick_name: "天澜",
        avatar:
          "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJnMX3WfLHDmqX7jssRbic4VSHSKtbvicrGmXGxGsQn2YUqaAIQsMofRe87925ZjLyNFYmSg3fOibZxw/132",
      },
      // 菜单数据
      dataOfMenu: [
        {
          id: 10,
          title: "控制面板",
          url: "",
          children: [
            { id: 11, title: "运营统计", url: "/index/index" },
          ],
        },
        {
          id: 20,
          title: "会员管理",
          url: "",
          children: [
            { id: 21, title: "会员管理", url: "/members/index" },
            { id: 22, title: "会员等级-", url: "/member-levels/index" },
          ],
        },
        {
          id: 30,
          title: "系统设置",
          url: "",
          children: [
            { id: 31, title: "网站设置", url: "/sys-configs/setting" },
            { id: 32, title: "字典数据-", url: "/sys-dicts/index" },
            { id: 33, title: "配置管理-", url: "/sys-configs/index" },
            { id: 34, title: "通知公告", url: "/sys-notices/index" },
          ],
        },
        {
          id: 40,
          title: "权限管理",
          url: "",
          children: [
            { id: 41, title: "管理员管理", url: "/auth-admins/index" },
            { id: 42, title: "角色管理", url: "/auth-groups/index" },
            { id: 43, title: "菜单管理", url: "/auth-rules/index" },
            { id: 44, title: "岗位管理-", url: "/auth-jobs/index" },
            { id: 45, title: "部门管理-", url: "/auth-departments/index" },
          ],
        },
      ],
    };
  },
  methods: {
    // 点击菜单操作
    onClickMenuItem(item) {
      this.$router.push(item.url);
    },
    onChangeUserProfileMenu(command) {
      switch (command) {
        case "logout":
          // 点击退出登录操作
          this.logout();
          break;
        case "update-pwd":
          break;
        case "profile":
          break;
        default:
          break;
      }
    },
    // 点击退出登录操作
    logout() {
      this.$confirm("您确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 清空数据
          this.dataOfMenu = [];
          this.gpLoginState.clearToken();
          this.$router.replace({ path: "/login" });
        })
        .catch(() => { });
    },
  },
  mounted() { },
};
</script>

<style>
@import url(../static/css/veladmin.css);
</style>
